<template>
  <div class="login-page">
    <el-form class="login-form">
      <h2 class="title">{{ is_login ? "登录" : "注册" }}</h2>
      <el-form-item v-if="!is_login">
        <el-input placeholder="用户名" size="large" v-model="form.user_name" />
      </el-form-item>
      <el-form-item>
        <el-input placeholder="手机号" size="large" v-model="form.phone" />
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="密码"
          size="large"
          show-password
          v-model="form.password"
        />
      </el-form-item>
      <el-form-item v-if="!is_login">
        <el-input
          placeholder="确认密码"
          size="large"
          show-password
          v-model="form.conform_password"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          type="primary"
          size="large"
          :loading="loading"
          @click="submitForm"
          >{{ is_login ? "提交" : "注册" }}</el-button
        >
        <div class="text-row">
          <span class="text-wrap" @click="is_login = !is_login">
            <span>{{
              is_login ? "没有账号？去注册" : "已有账号？去登录"
            }}</span>
            <el-icon><ArrowRight /></el-icon>
          </span>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { userStore } from "@/stores";
import { ref } from "vue";

const form = ref({
  phone: "",
  user_name: "",
  password: "",
  conform_password: "",
});
const is_login = ref(true);
const loading = ref(false);
const store = userStore();
const router = useRouter();

const submitForm = async () => {
  let { value: user } = form;
  if (!user.phone || !user.password) {
    return ElMessage({
      type: "warning",
      message: "手机号和密码不能为空",
    });
  }
  if (user.phone.length != 11 || isNaN(Number(user.phone))) {
    return ElMessage({
      type: "warning",
      message: "请输入正确的手机号",
    });
  }
  if (!is_login.value && !user.user_name) {
    return ElMessage({
      type: "warning",
      message: "请输入用户名",
    });
  }
  if (!is_login.value) {
    if (user.password != user.conform_password) {
      return ElMessage({
        type: "warning",
        message: "两次输入密码不一致",
      });
    }
  }
  try {
    loading.value = true;
    if (is_login.value) {
      await store.login(user);
      setTimeout(() => {
        router.push("/");
      }, 500);
    } else {
      await store.register(user);
    }
    loading.value = false;
    ElMessage({
      type: "success",
      message: is_login.value ? "登录成功" : "注册成功",
    });
  } catch (errer: any) {
    loading.value = false;
    ElMessage({
      type: "error",
      message: errer || "错误",
    });
  }
};
</script>
<style lang="less">
.login-page {
  margin: 20vh auto;
  .login-form {
    width: 360px;
    background: #fff;
    padding: 30px 50px 10px 50px;
    border-radius: 7px;
    margin: 20px auto;
    box-shadow: var(--el-box-shadow);
    .title {
      text-align: center;
      margin-bottom: 18px;
    }
    .login-btn {
      margin-top: 14px;
      width: 100%;
    }
    .text-row {
      text-align: right;
      width: 100%;
      padding-top: 5px;
      .text-wrap {
        display: inline-flex;
        cursor: pointer;
        align-items: center;
      }
    }
  }
}
</style>
